<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<div id="demo">
		<!-- 
			v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名
			
			在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
			
			也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法
		 -->
		<ul>
			<li v-for="(item, index) in items">{{ parentMessage }} - {{item.message}} -- {{index}}</li>
		</ul>
		
		<!-- 
			v-for 通过一个对象的属性来迭代。
			第二个的参数为 property 名称 (也就是键名)：
			第三个参数为 index 索引
			
			在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
		 -->
		 
		 <ul>
			 <li v-for="(item, name, index) in object">{{index}}. {{name}}: {{item}}</li>
		 </ul>
	</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
	const vm = new Vue({
		el:'#demo',
		data:{
			parentMessage:'Parent',
			items:[{message:'Foo'}, {message:'Bar'}],
			object:{
				title: 'How to do lists in Vue',
				author: 'Jane Doe',
				publishedAt: '2016-04-10'
			}
		}
	});
</script>
</body>
</html>
